<template>
  <div class="app-container home">
    <!-- 工作室相关工具快捷菜单区 -->
    <el-card shadow="hover" class="studio-tools-card">
      <div slot="header" class="clearfix card-header-flex">
        <span><i class="el-icon-s-tools card-header-icon"></i> 工作室相关工具</span>
      </div>
      <el-row :gutter="20">
        <el-col v-for="(tool, idx) in studioToolMenus" :key="tool.path" :xs="24" :sm="12" :md="8" :lg="4">
          <div class="studio-tool-item" @click="handleToolClick(tool)">
            <component
              v-if="isElementIcon(tool.meta.icon)"
              :is="'i'"
              :class="iconClass(tool.meta.icon)"
              style="font-size:32px; margin-bottom: 8px;"
            />
            <svg-icon
              v-else
              :icon-class="tool.meta.icon"
              style="font-size:32px; width:32px; height:32px; margin-bottom:8px; display:inline-block; vertical-align:middle;"
            />
            <div class="studio-tool-title">{{ tool.meta.title }}</div>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <!-- 我的信息 + 通知公告 -->
    <el-row :gutter="20" class="top-info-row">
      <el-col :xs="24" :sm="24" :md="8" :lg="8">
        <el-card shadow="hover" class="info-card fixed-card-body">
          <div slot="header" class="clearfix card-header-flex">
            <span><i class="el-icon-user card-header-icon"></i> 我的信息</span>
          </div>
          <div class="card-body-scroll">
            <el-descriptions class="descriptions-full" :column="1" size="small" border :label-style="{width: '100px', fontWeight: 'bold'}">
              <el-descriptions-item label="账号">{{ userInfo.userName }}</el-descriptions-item>
              <el-descriptions-item label="昵称">{{ userInfo.nickName }}</el-descriptions-item>
<!--              <el-descriptions-item label="所属部门">{{ userInfo.dept && userInfo.dept.deptName }}</el-descriptions-item>-->
<!--              <el-descriptions-item label="部门负责人">{{ userInfo.dept && userInfo.dept.leader }}</el-descriptions-item>-->
              <el-descriptions-item label="权限">{{ roleGroup }}</el-descriptions-item>
<!--              <el-descriptions-item label="工作室备注">{{ userInfo.remark }}</el-descriptions-item>-->
              <el-descriptions-item label="购买时长">{{ userInfo.userValidityPeriod }} 天</el-descriptions-item>
              <el-descriptions-item label="到期时间">{{ formatDate(userInfo.expirationDate) }}</el-descriptions-item>
              <el-descriptions-item label="最近登录IP">{{ userInfo.loginIp }}</el-descriptions-item>
              <el-descriptions-item label="最近登录时间">{{ formatDateTime(userInfo.loginDate) }}</el-descriptions-item>
              <el-descriptions-item label="状态">
                <el-tag :type="userInfo.status === '0' ? 'success' : 'danger'">
                  {{ userInfo.status === '0' ? '正常' : '停用' }}
                </el-tag>
              </el-descriptions-item>
            </el-descriptions>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="16" :lg="16">
        <el-card shadow="hover" class="notice-card fixed-card-body">
          <div slot="header" class="clearfix card-header-flex">
            <span><i class="el-icon-message card-header-icon"></i> 通知和公告</span>
          </div>
          <div class="card-body-scroll">
            <el-row :gutter="0" class="notice-split-row">
              <el-col :xs="24" :sm="8" :md="8" :lg="8" class="notice-list-col">
                <ul
                  class="notice-list-ul infinite-list"
                  v-infinite-scroll="loadNoticeListMore"
                  :infinite-scroll-disabled="noticeLoading || noticeNoMore"
                  :infinite-scroll-distance="40"
                  style="overflow:auto;height:100%"
                >
                  <li
                    v-for="(item, idx) in noticeList"
                    :key="idx"
                    :class="{active: selectedNoticeIdx === idx}"
                    @click="selectNotice(idx)"
                  >
                    <div class="notice-list-title">{{ item.title }}</div>
                    <div class="notice-list-brief">{{ item.brief || (item.content && item.content.replace(/<[^>]+>/g, '').slice(0, 30)+'...') }}</div>
                  </li>
                  <li v-if="noticeLoading" class="notice-list-loading">加载中...</li>
                  <li v-if="noticeNoMore && noticeList.length" class="notice-list-nomore">没有更多公告了</li>
                </ul>
              </el-col>
              <div class="notice-divider"></div>
              <el-col :xs="24" :sm="16" :md="16" :lg="16" class="notice-detail-col">
                <div v-if="selectedNotice" class="notice-detail-content">
                  <div class="notice-detail-title">{{ selectedNotice.title }}</div>
                  <div class="notice-detail-body" v-html="selectedNotice.content"></div>
                  <div class="notice-detail-actions" v-if="selectedNotice.actions">
                    <el-button v-for="(btn, bidx) in selectedNotice.actions" :key="bidx" :type="btn.type" size="mini" style="margin-right: 8px" @click="btnClick(btn, selectedNotice)">{{ btn.text }}</el-button>
                  </div>
                </div>
                <div v-else class="notice-detail-empty">请选择左侧公告查看详情</div>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 数据概览区 -->
    <el-card shadow="hover" class="overview-card">
      <div slot="header" class="clearfix card-header-flex">
        <span><i class="el-icon-data-analysis card-header-icon"></i> 数据概览（示例为展示数据 功能持续开发中）</span>
        <!-- 可选右侧辅助信息 -->
        <!-- <span style="float: right; color: #909399; font-size: 12px;">共 {{ overviewList.length }} 项</span> -->
      </div>
      <el-row :gutter="20" class="overview-row">
        <el-col v-for="(item, idx) in overviewList" :key="idx" :xs="12" :sm="8" :md="6" :lg="3">
          <div class="overview-item">
            <div class="overview-title">{{ item.title }}</div>
            <div class="overview-value">{{ item.value }}</div>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <!-- 其余内容可继续保留或补充 -->
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { getUserProfile } from '@/api/system/user'
import { listNotice, getNotice } from '@/api/system/notice'
export default {
  name: "Index",
  data() {
    return {
      version: "3.9.0",
      // 模拟接口返回的个人信息
      userInfo: {},
      roleGroup: "工作室",
      // 通知公告
      noticeList: [],
      noticePageNum: 1,
      noticePageSize: 10,
      noticeLoading: false,
      noticeNoMore: false,
      // 数据概览
      overviewList: [
        { title: '录单笔数', value: 27 },
        { title: '订单总额', value: '4254.0' },
        { title: '发单总额', value: '3660.0' },
        { title: '预计利润', value: '594.0' },
        { title: '利润率', value: '13.96%' },
        { title: '接手数量', value: 25 },
        { title: '接手率', value: '92.59%' },
        { title: '撤销数量', value: 0 },
        { title: '撤销率', value: '0%' },
        { title: '退单数量', value: '10(37.04%)' },
        { title: '完成数量', value: 0 },
        { title: '完成率', value: '0%' }
      ],
      selectedNoticeIdx: 0
    }
  },
  created() {
    this.userInfoList();
    this.loadNoticeList(true);
  },
  computed: {
    ...mapState({
      allRoutes: state => state.permission.routes
    }),
    studioToolMenus() {
      // 递归查找 /studioTools
      const findStudio = (routes) => {
        for (const r of routes) {
          if (r.path === '/studioTools') return r.children || [];
          if (r.children) {
            const found = findStudio(r.children);
            if (found.length) return found;
          }
        }
        return [];
      };
      return findStudio(this.allRoutes);
    },
    selectedNotice() {
      return this.noticeList[this.selectedNoticeIdx] || null;
    }
  },
  methods: {
    userInfoList() {
      getUserProfile().then(res => {
        console.log("返回的是"+res.data)
        this.userInfo = res.data;
        this.roleGroup = res.roleGroup;
      });
    },
    loadNoticeList(init = false) {
      if (init) {
        this.noticeList = [];
        this.noticePageNum = 1;
        this.noticeNoMore = false;
      }
      this.noticeLoading = true;
      listNotice({ pageNum: this.noticePageNum, pageSize: this.noticePageSize, status: '0' })
        .then(res => {
          const rows = res.rows || [];
          if (rows.length < this.noticePageSize) {
            this.noticeNoMore = true;
          }
          const mapped = rows.map(item => ({
            id: item.noticeId,
            title: item.noticeTitle,
            content: '',
            brief: item.noticeContent ? item.noticeContent.replace(/<[^>]+>/g, '').slice(0, 30) + '...' : '',
          }));
          this.noticeList = this.noticeList.concat(mapped);
          if (this.noticeList.length > 0 && init) {
            this.loadNoticeDetail(0);
          }
        })
        .catch(() => {
          this.noticeNoMore = true;
          this.$message.error('公告加载失败，请稍后重试');
        })
        .finally(() => {
          this.noticeLoading = false;
        });
    },
    loadNoticeListMore() {
      if (this.noticeLoading || this.noticeNoMore) return;
      this.noticePageNum++;
      this.loadNoticeList();
    },
    loadNoticeDetail(idx) {
      const notice = this.noticeList[idx];
      if (!notice) return;
      getNotice(notice.id).then(res => {
        this.$set(this.noticeList, idx, {
          ...notice,
          content: res.data.noticeContent || '',
          title: res.data.noticeTitle || notice.title,
        });
      });
    },
    goTarget(href) {
      window.open(href, "_blank")
    },
    handleRenew() {
      this.$message.info('续费功能暂未开放，可联系管理员');
    },
    btnClick(btn, item) {
      // 按钮点击事件，根据 action 字段区分
      if(btn.action === 'buy') {
        this.$message.success('请联系管理员购买系统成品');
      } else if(btn.action === 'miniapp') {
        this.$message.info('价格小程序功能暂未开放');
      } else if(btn.action === 'help') {
        this.$message.info('帮助文档功能暂未开放');
      } else {
        this.$message.info('功能开发中');
      }
    },
    handleToolClick(tool) {
      // 拼接完整路径
      let base = '/studioTools';
      let path = tool.path.startsWith('/') ? tool.path : `${base}/${tool.path}`;
      this.$router.push(path);
    },
    iconClass(icon) {
      if (!icon) return 'el-icon-menu';
      return icon.startsWith('el-icon-') ? icon : 'el-icon-' + icon;
    },
    isElementIcon(icon) {
      return icon && icon.startsWith('el-icon-');
    },
    formatDate(val) {
      if (!val) return '';
      if (val.indexOf('T') > 0) return val.split('T')[0];
      return val;
    },
    formatDateTime(val) {
      if (!val) return '';
      if (val.indexOf('T') > 0) return val.replace('T', ' ').replace(/\.\d+.*$/, '');
      return val;
    },
    selectNotice(idx) {
      this.selectedNoticeIdx = idx;
      // 加载详情
      this.loadNoticeDetail(idx);
    }
  }
}
</script>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}

.top-info-row {
  margin-bottom: 20px;
}
.info-card, .notice-card {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  margin-bottom: 0;
}
.notice-list {
  padding: 0 8px 8px 8px;
}
.notice-title {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 6px;
}
.notice-content {
  color: #606266;
  font-size: 13px;
  margin-bottom: 8px;
}
.notice-actions {
  margin-bottom: 8px;
}
.overview-card {
  margin: 20px 0 24px 0;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.overview-row {
  margin-top: 8px;
}
.overview-item {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.03);
  padding: 18px 0 10px 0;
  text-align: center;
  margin-bottom: 12px;
}
.overview-title {
  color: #909399;
  font-size: 13px;
  margin-bottom: 6px;
}
.overview-value {
  font-size: 22px;
  font-weight: 600;
  color: #303133;
}
.studio-tools-card {
  margin-bottom: 24px;
  border-radius: 8px;
}
.studio-tool-item {
  background: #fafbfc;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.03);
  text-align: center;
  padding: 24px 0 12px 0;
  margin-bottom: 12px;
  cursor: pointer;
  transition: box-shadow 0.2s, background 0.2s;
}
.studio-tool-item:hover {
  background: #f5f7fa;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.studio-tool-title {
  font-size: 16px;
  font-weight: 500;
  margin-top: 10px;
  color: #333;
}
.card-header-flex {
  display: flex;
  align-items: center;
  min-height: 36px;
  font-size: 16px;
  font-weight: 500;
}
.card-header-icon {
  font-size: 18px;
  margin-right: 6px;
  vertical-align: middle;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.fixed-card-body ::v-deep .el-card__body {
  height: 291px;
  padding: 18px 18px 18px 18px;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.card-body-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
@media (max-width: 1200px) {
  .top-info-row > .el-col {
    min-width: 0;
  }
  .fixed-card-body ::v-deep .el-card__body {
    height: 291px;
  }
}
@media (max-width: 768px) {
  .fixed-card-body ::v-deep .el-card__body {
    height: auto;
    min-height: 0;
    max-height: none;
  }
  .card-body-scroll {
    max-height: none;
  }
}
.info-card ::v-deep .el-card__body {
  padding: 0 !important;
}
.descriptions-full {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.notice-split-row {
  height: 100%;
  min-height: 0;
  position: relative;
}
.notice-list-col {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-radius: 8px 0 0 8px;
  background: #fafbfc;
}
.notice-divider {
  width: 1px;
  background: #f0f0f0;
  margin: 0 0;
  height: 90%;
  align-self: center;
  position: absolute;
  left: 33.33%;
  top: 5%;
  z-index: 1;
  display: block;
}
.notice-detail-col {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-radius: 0 8px 8px 0;
  background: #fff;
  position: relative;
  z-index: 2;
}
.notice-list-ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.notice-list-ul li {
  cursor: pointer;
  padding: 10px 8px;
  border-bottom: 1px solid #f0f0f0;
  transition: background 0.2s;
}
.notice-list-ul li.active, .notice-list-ul li:hover {
  background: #f5f7fa;
}
.notice-list-title {
  font-weight: 500;
  font-size: 14px;
  color: #333;
}
.notice-list-brief {
  font-size: 12px;
  color: #909399;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.notice-detail-content {
  padding: 0 8px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.notice-detail-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
}
.notice-detail-body {
  font-size: 13px;
  color: #606266;
  flex: 1;
  overflow-y: auto;
}
.notice-detail-actions {
  margin-top: 10px;
}
.notice-detail-empty {
  color: #bbb;
  text-align: center;
  margin-top: 40px;
}
// 修复 el-scrollbar 横向滚动条
::v-deep .custom-scrollbar .el-scrollbar__bar.is-horizontal {
  display: none !important;
}
.infinite-list {
  padding: 0;
  margin: 0;
  list-style: none;
}
.notice-list-loading, .notice-list-nomore {
  text-align: center;
  color: #bbb;
  font-size: 13px;
  padding: 8px 0;
}
</style>

